<template>
  <div class="dashboard">
    <div class="system-card" @click="goToSystem('system-a')">
      <h2>系统 A</h2>
      <p>点击进入系统 A</p>
    </div>
    <div class="system-card" @click="goToSystem('system-b')">
      <h2>系统 B</h2>
      <p>点击进入系统 B</p>
    </div>
  </div>
</template>

<script>
import store from "../../store";

export default {
  methods: {
    goToSystem (system) {
      if (system === 'system-a') {
        this.$router.push({ path: '/' }) // 移除分号
        // window.location.href = 'http://localhost:9527/#/sys/user'
      } else if (system === 'system-b') {
        // this.$router.push({ path: '/sys/dept' }) // 移除分号
        let token = store.getters.access_token;//拿到token
        // let url = "http://localhost:8080/#/home";
        // window.open(`${url}?token=${token}`, "_blank");

// 获取 token
//         var token = store.token;
        // 创建一个iframe，在iframe中加载一个跨域的网页
        var iframe = document.createElement("iframe");
        iframe.src = "http://localhost:8080/#/home"
        document.body.append(iframe);
        // 使用postMessage()方法将token传递给iframe
        setTimeout(function () {
          iframe.contentWindow.postMessage(token, "http://localhost:8080/#/home");
          window.open(iframe.src)
        }, 4000);
        // window.location.href = 'http://localhost:8080/#/home?token=${encodeURIComponent(token)}'+ ${encodeURIComponent(token)}
      }
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.system-card {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s;
}

.system-card:hover {
  transform: scale(1.05);
}

.system-card h2 {
  margin-bottom: 10px;
}

.system-card p {
  color: #666;
}
</style>
